<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div class="container">
        <div class="st-container">
            <input type="radio" name="radio-set" checked="checked" id="st-control-1" />
            <a href="#st-panel-1">Serendipity</a>
            <input type="radio" name="radio-set" id="st-control-2" />
            <a href="#st-panel-2">Happiness</a>
            <input type="radio" name="radio-set" id="st-control-3" />
            <a href="#st-panel-3">Tranquillity</a>
            <input type="radio" name="radio-set" id="st-control-4" />
            <a href="#st-panel-4">Positivity</a>
            <input type="radio" name="radio-set" id="st-control-5" />
            <a href="#st-panel-5">Passion</a>
        <div class="st-scroll">
        
        <section class="st-panel" id="st-panel-1">
        <div class="st-deco" data-icon="H"></div>
        <h2>Serendipity</h2>
        <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
        <p>
        <a class="htmleaf-icon icon-home" href="http://www.zzfriend.com/" title="蚂蚁HTML5社区" target="_blank"><span> 蚂蚁HTML5社区</span></a> |
        <a class="htmleaf-icon icon-arrow-right3" href="http://www.zzfriend.com/h5game/" title="蚂蚁HTML5社区手机游戏" target="_blank"><span> 蚂蚁HTML5社区手机游戏</span></a>
        </p>
        </section>
        <section class="st-panel st-color" id="st-panel-2">
        <div class="st-deco" data-icon="2"></div>
        <h2>Happiness</h2>
        <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
        </section>
        <section class="st-panel" id="st-panel-3">
        <div class="st-deco" data-icon="B"></div>
        <h2>Tranquillity</h2>
        <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
        </section>
        <section class="st-panel st-color" id="st-panel-4">
        <div class="st-deco" data-icon="x"></div>
        <h2>Positivity</h2>
        <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
        </section>
        <section class="st-panel" id="st-panel-5">
        <div class="st-deco" data-icon="Ç"></div>
        <h2>Passion</h2>
        <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
        </section>
        </div>
        </div>
        </div>
</body>
</html>